<template>
	<div class="footer flex fs12" @click.stop="nav">
		<div @click.stop="jump(0)">
			<p>
                <img v-if="active!==0" :src="require('@images/sd-home.svg')" alt>
			    <img v-if="active===0" :src="require('@images/sd-home-select.svg')" alt>
            </p>
			<p class="text" :class="{active:active==0}">{{name[0]}}</p>
		</div>
		<div @click.stop="jump(1)">
			<p>
                <img v-if="active!==1" :src="require('@images/sd-quote.svg')" alt>
			    <img v-if="active===1" :src="require('@images/sd-quote-select.svg')" alt>
            </p>
			<p class="text" :class="{active:active==1}">{{name[1]}}</p>
		</div>
		<div @click.stop="jump(2)">
			<p>
                <img v-if="active!==2" :src="require('@images/sd-trade.svg')" alt>
			    <img v-if="active===2" :src="require('@images/sd-trade-select.svg')" alt>
            </p>
			<p class="text" :class="{active:active==2}">{{name[2]}}</p>
		</div>
		<div @click.stop="jump(3)">
			<p>
                <img v-if="active!==3" :src="require('@images/sd-news.svg')" alt>
			    <img v-if="active===3" :src="require('@images/sd-news-select.svg')" alt>
            </p>
			<p class="text" :class="{active:active==3}">{{name[3]}}</p>
		</div>
		<div @click.stop="jump(4)">
			<p>
                <img v-if="active!==4" :src="require('@images/sd-mine.svg')" alt>
			    <img v-if="active===4" :src="require('@images/sd-mine-select.svg')" alt>
            </p>
			<p class="text" :class="{active:active==4}">{{name[4]}}</p>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';

export default {
	name: 'Nav',
	data() {
		return {
			name: ['首页', '行情', '充值', '持仓', '我的'],
			active: 0
		}
    },
    computed: {
        ...mapState(['topupAuth', 'userInfo']),
    },
	methods: {
		jump(parm) {
			var linkUrl = ''
			switch (parm) {
				case 0:
					linkUrl = '/'
					break
				case 1:
					linkUrl = '/quota'
					break
				case 3:
					linkUrl = '/order'
					break
				case 4:
					linkUrl = '/mine'
					break
				default:
					linkUrl = '/account/paySelect.html'
            }
            
            if (parm === 2) {
                this.getTopupAuth();
            } else {
                this.$router.push({
                    path: linkUrl
                })
            }
        },
        getTopupAuth() {
				if (Object.keys(this.topupAuth).length === 0) {
					this.$router.push({
						path: "/login",
					});
				} else if (this.topupAuth.identify === 1 && !this.topupAuth.cardState) {
					MessageBox.confirm("", {
						title: "充值",
						message: "为了您的资金安全，请前去绑卡",
						confirmButtonText: "去绑定",
						confirmButtonClass: "red"
					}).then(() => {
						this.$router.push({
							path: "/account/bindbank",
						});
					});
				} else {
					window.location.href = "./account/paySelect.html";
                }
                return;
		},
		nav() {}
	},
	mounted() {
		var href = window.location.href
		if (href.indexOf('/quota') > -1) {
			this.$data.active = 1
		} else if (href.indexOf('/live') > -1) {
			this.$data.active = 2
		} else if (href.indexOf('/order') > -1) {
			this.$data.active = 3
		} else if (href.indexOf('/mine') > -1) {
			this.$data.active = 4
		} else {
			this.$data.active = 0
		}
	}
}
</script>
<style scoped lang='scss'>
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: rem(50px);
	background-color: #fff;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 100;
	border-top: 1px solid #f0f0f0;

	display: flex;
	justify-content: space-around;
}
div {
	flex: 1;
	align-content: center;
}
.active {
	color: #f96d46;
}
img {
	margin: 0 auto;
	width: rem(20px);
    height: rem(20px);
    margin-top: rem(5px);
}
p {
    text-align: center;
    height: rem(20px);
    line-height: rem(20px);

}
.text{
    margin-top: rem(8px);
}
</style>